<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="./lib/bootstrap-3.3.7.css" rel="stylesheet" />
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
      .router-link-active{
          color: brown;
          line-height: 30px;
          font-size: 24px;
      }
     .v-enter,
     .v-leave-to {
      opacity: 0;
      transform: translateX(80px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }
    </style>
</head>
<body>

<div id="app">
    <!-- <a href="#/home">首页</a>
    <a href="#/type">分类</a>
    <a href="#/my">我的</a> -->

    <router-link to="/home" tag="span">首页</router-link>
    <router-link to="/type" tag="span">分类</router-link>
    <router-link to="/my" tag="span">我的</router-link>
    <!-- 动画切换 -->
    <transition mode="out-in">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
   </transition>
</div>

<script>


var tpl01 = {
   template: '<h2>这里是首页</h2>'
}

var tpl02 = {
    template:'<h2>这里是分类</h2>'
}

var tpl03 = {
    template:'<h2>这里是我的</h2>'
}

var routerObj = new VueRouter({
   routes:[
       {path:'/',component:tpl01},
       {path:'/home',component:tpl01},
       {path:'/type',component:tpl02},
       {path:'/my',component:tpl03}
  ]
});

 var vm = new Vue({
  el:'#app',
  data:{},
  methods:{},
  router:routerObj
 }) ;
 </script>
</body>
</html>